<template>
	<div class="liveInformation">
		<div class="liveInformationCont">
			<div class="liveInformationItems">
				<div class="liveInformationItems_left">
					<span>*</span>直播名称
				</div>
				<div class="liveInformationItems_right">
					<input type="text" value="" v-model="from.name" placeholder="请输入"
						placeholder-class="zj-placeholder-class" />
				</div>
			</div>
			<div class="liveInformationItems" @click.stop='startTimeShow = true'>
				<div class="liveInformationItems_left">
					开播时间
				</div>
				<div class="liveInformationItems_right">
					{{ startTime ? from.startTime : '请选择开播时间' }}
					<u-datetime-picker :show="startTimeShow" :minDate='onwTime' v-model="startTime" mode="datetime"
						@confirm='startTimeEvnet' @cancel='startTimeShow = false' placeholder="请选择开播时间">
					</u-datetime-picker>
					<!-- <input type="text" value=""  placeholder="请输入" placeholder-class="zj-placeholder-class"/> -->
				</div>
			</div>
			<div class="liveInformationItems noBorder" @click.stop='endTimeShow = true' v-if="liveMode == 1">
				<div class="liveInformationItems_left">
					结束时间
				</div>
				<div class="liveInformationItems_right">
					{{ endTime ? from.endTime : '请选择结束时间' }}
					<u-datetime-picker :show="endTimeShow" :minDate='onwTime' v-model="endTime" mode="datetime"
						@cancel='endTimeShow = false' @confirm='endTimeEvent' placeholder="请选择结束时间">
					</u-datetime-picker>
					<!-- <input type="text" value=""  placeholder="请输入" placeholder-class="zj-placeholder-class"/> -->
				</div>
			</div>

			<div class="liveInformationItems noBorder opt" v-else>
				<div class="liveInformationItems_left">
					结束时间
				</div>
				<div class="liveInformationItems_right">
					{{ endTime ? from.endTime : '请选择结束时间' }}
					<u-datetime-picker :show="endTimeShow" :minDate='onwTime' v-model="endTime" mode="datetime"
						@cancel='endTimeShow = false' @confirm='endTimeEvent' placeholder="请选择结束时间">
					</u-datetime-picker>
					<!-- <input type="text" value=""  placeholder="请输入" placeholder-class="zj-placeholder-class"/> -->
				</div>
			</div>


			<div class="liveInformationItems liveInformationItemsLive">
				<div class="liveInformationItems_left">
					直播封面
				</div>

			</div>
			<div class="liveInformationSP" @click="showAvatarPop()">
				<image :src="from.setting.content" mode="aspectFit"></image>
			</div>
			<div class="liveInformationSPText">
				点击选择图片(1600*900)
			</div>

			<div class="liveInformationBtn" @click='saveLiveEvent'>
				<div class="liveInformationBtnCont">
					保存
				</div>
			</div>

			<u-popup :show="isShowAvatarPop" round="10" @close="closeAvatarPop" mode="bottom">
				<view class="pop-container">
					<view class="avatar-pop-box">
						<view class="pop-item" @click="choosePic(1)">
							拍照
						</view>
						<view class="pop-item" @click="choosePic(2)">
							从手机相册选择
						</view>
					</view>
					<view class="pop-cancel-item" @click="closeAvatarPop">
						取消
					</view>
				</view>
			</u-popup>
		</div>
	</div>
</template>

<script>
import {
	txCosUpload
} from '@/utils/txCosUpload'
export default {
	props: {
		liveId: [Number, String]
	},
	data() {
		return {
			onwTime: 0,
			endTime: '',
			endTimeShow: false,
			startTime: '',
			startTimeShow: false,
			isShowNamePop: false,
			isShowAvatarPop: false,
			from: {
				startTime: '',
				endTime: '',
				name: '',
				setting: {
					content: "",
					status: 1,
					type: "cover"
				}
			},
			liveInfo: '',
			liveMode: 1,//1为直播，2为录播
			timeDifference: 0
		}
	},
	mounted() {
		this.onwTime = new Date().getTime()
		console.log('onwTimeonwTime', this.onwTime, "liveId", this.liveId)
		this.getLiveGet()
		this.from.liveId = this.liveId
	},
	methods: {
		// 获取直播信息
		async getLiveGet() {
			const {
				data
			} = await this.$request(this.$Api.liveGet, {
				liveId: this.liveId
			}, "get")
			if (data.code != 200) return
			this.from.setting.content = data.data.cover
			for (var key in this.from) {
				if (data.data[key]) {
					this.from[key] = data.data[key]
				}
			}
			this.startTime = new Date(this.from.startTime.replace(/-/g, '/')).getTime()
			this.endTime = new Date(this.from.endTime.replace(/-/g, '/')).getTime()
			this.liveMode = data.data.mode
			// 判断录播，计算时间差
			if (this.liveMode == 2) {
				this.compNum()
			}
		},
		// 判断录播，计算时间差
		compNum() {
			this.timeDifference = Number(this.endTime) - Number(this.startTime)
			console.log('timeDifference', this.timeDifference)
		},
		startTimeEvnet(e) {
			const nowTime = new Date().getTime()
			// 录播
			if (this.liveMode == 2) {
				this.startTimeShow = false
				console.log("nowTime", e.value, nowTime, this.nowTime)
				setTimeout((res) => {
					this.from.startTime = this.$utils.formatDate(e.value)
					this.changeEndTime()
					console.log('formatDate', this.from.startTime, "1111", this.startTime)
				}, 200)
			} else {
				if (e.value <= nowTime) {
					this.startTime = this.from.startTime = ''
					return uni.showToast({
						title: '开始时间不能早于当前时间',
						icon: 'none'
					})
				}
				this.startTimeShow = false
				console.log("nowTime", e.value, nowTime, this.nowTime)
				setTimeout((res) => {
					this.from.startTime = this.$utils.formatDate(e.value)
					this.isTime(1, e.value)
					console.log('formatDate', this.from.startTime, "1111", this.startTime)
				}, 200)
			}
		},
		// 动态修改结束时间
		changeEndTime() {
			this.endTime = Number(this.startTime) + Number(this.timeDifference)
			this.from.endTime = this.$utils.formatDate(this.endTime)
		},
		endTimeEvent(e) {
			console.log('11', e.value)
			const nowTime = new Date().getTime()
			if (e.value <= nowTime) {
				this.endTime = this.from.endTime = ''
				return uni.showToast({
					title: '结束时间不能晚于当前时间',
					icon: 'none'
				})
			}
			this.endTimeShow = false
			setTimeout((res) => {
				this.from.endTime = this.$utils.formatDate(e.value)
				this.isTime(2, e.value)
			}, 200)
		},
		isTime(type) {
			console.log("2222", this.startTime, '333', this.endTime)
			if (!this.startTime || !this.endTime) return
			if (this.startTime >= this.endTime) {
				type == 1 ? this.startTime = this.from.startTime = '' : this.endTime = this.from.endTime = ''
				return uni.showToast({
					title: '开始时间不能大于结束时间',
					icon: 'none'
				})
			}
			const oneDayTime = 1000 * 60 * 60 * 24;
			if ((this.endTime - this.startTime) > 1000 * 60 * 60 * 24 * 7) {
				this.endTime = this.from.endTime = ''
				return uni.showToast({
					title: '直播时间不能超过7天',
					icon: 'none'
				})
			}
		},
		showAvatarPop() {
			console.log('showAvatarPop')
			this.isShowAvatarPop = true
		},
		closeAvatarPop() {
			this.isShowAvatarPop = false
		},
		showPhonePop() {
			console.log('showPhonePop')
			this.$refs.bindPhonePopRef.formData.oldPhone = this.formData.phoneNum
			this.isShowPhonePop = true
		},
		closePhonePop() {
			this.isShowPhonePop = false
		},
		showNamePop() {
			console.log('showNamePop')
			this.isShowNamePop = true
		},
		closeNamePop() {
			console.log('closeNamePop')
			this.isShowNamePop = false
		},
		confirmNamePop(params) {
			this.formData.name = params
			this.isShowNamePop = false
		},

		confirmName() {
			console.log('confirmName')
			this.isShowNamePop = false
		},
		// 上传图片
		choosePic(type) {
			const vm = this
			if (type == 1) {
				this.$utils.androidCamera(this)
			} else {
				this.$utils.androidAlbum(this)
			}
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: async (res1) => {
					const file = res1.tempFiles[0];
					const params = {
						scene: 'wechat'
					}
					txCosUpload(file, params, (progressData) => {
						// 实现进度条，目前没用到
						console.log(123, Math.round(progressData.percent * 100))
					},).then(res => {
						uni.showToast({
							title: '图片上传成功',
							icon: 'none',
							duration: 1500
						})
						vm.from.setting.content = res.fileUrl
						vm.isShowAvatarPop = false
					})
				}
			});
		},
		// 保存直播
		async saveLiveEvent() {
			const params = {
				startTime: this.from.startTime,
				endTime: this.from.endTime,
				name: this.from.name,
				liveId: this.from.liveId,
				setting: [this.from.setting]
			}
			const {
				data
			} = await this.$request(this.$Api.liveUpdateSetting, params, "post")
			if (data.code != 200) return
			uni.showToast({
				title: '保存成功',
				icon: 'none',
				duration: 1500
			})
			this.getLiveGet()
		}
	}
}
</script>

<style lang="scss">
.liveInformation {
	width: 100%;
	min-height: 60rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding-bottom: 32rpx;

	.pop-container {
		font-size: 34rpx;
		color: #000000;
		text-align: center;
		background-color: #F2F2F2;

		.pop-item {
			padding: 32rpx 0;
			background-color: #FFFFFF;
			margin-bottom: 2rpx;
		}

		.pop-cancel-item {
			background-color: #FFFFFF;
			padding: 32rpx 0;
			margin-top: 16rpx;
		}
	}


	.liveInformationCont {
		padding: 0 32rpx 0 32rpx;
		box-sizing: border-box;
		width: 100%;

		.liveInformationItems {
			width: 100%;
			height: 104rpx;
			border-bottom: 1rpx solid #E3E8EE;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #464C5B;

			.liveInformationItems_left {
				min-width: 150rpx;

				span {
					color: #FF5A5F;
				}
			}

			.liveInformationItems_right {
				text-align: right;
				font-size: 28rpx;

				input {
					font-size: 28rpx;
				}
			}

		}

		.opt {
			opacity: 0.5;
		}

		.liveInformationItemsLive {
			height: 40rpx;
			margin-top: 32rpx;
		    padding-bottom: 5rpx;
		}

		.liveInformationSP {
			width: 621rpx;
			height: 352rpx;
			border-radius: 16rpx;
			margin: 30rpx auto;

			image {
				width: 621rpx;
				height: 352rpx;
				border-radius: 16rpx;
				background: #f5f5f5;
			}
		}

		.liveInformationSPText {
			font-size: 28rpx;
			color: #C8C9CC;
		}

		.liveInformationBtn {
			width: 750rpx;
			height: 166rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
			display: flex;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 0;
			left: 0;

			.liveInformationBtnCont {
				width: 640rpx;
				height: 80rpx;
				background: #295FFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(210, 210, 210, 0.5);
				border-radius: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				font-size: 32rpx;

			}
		}
	}
}
</style>